<template>
	<view class="info">
		<template v-if="echoInfo">
			<view class="cell">
				<view class="s1">头像</view>
				<view class="s2">
					<button v-if="vuex_user.person_info.source =='mp_mini'" type="balanced" open-type="chooseAvatar"
						@chooseavatar="onChooseavatar">
						<image :src="avatarUrl"></image>
					</button>
					<button v-else type="balanced">
						<image :src="avatarUrl"></image>
					</button>
				</view>
				<view class="s3">
					<u-icon name='arrow-down'></u-icon>
				</view>
			</view>

			<view class="cell">
				<view class="s1">昵称</view>
				<view class="s2">
					<input type="nickname" :disabled="vuex_user.person_info.source!='mp_mini'" class="weui-input"
						:value="form.nickname" @blur="bindblur" placeholder="请输入昵称" @input="bindinput" />
				</view>
				<view class="s3">
					<u-icon name='arrow-down'></u-icon>
				</view>
			</view>

			<view class="cell" @click="(vuex_user.person_info.source == 'mp_mini')&&(gender_show = true)">
				<view class="s1">性别</view>
				<view class="s2">
					<text class="weui-input">{{gender_list[0][form.sex] }}</text>
				</view>
				<view class="s3">
					<u-icon name='arrow-down'></u-icon>
				</view>
			</view>

			<view class="cell" style="display: flex;justify-content: space-between;">
				<view class="s1">电话</view>
				<view class="s2">
					<text class="weui-input">{{ form.phone }}</text>
					<view>
						<u-button v-if="vuex_user.person_info.confirm_idcard=='0'" class="custom_btn" text='下一步'
							type='success' shape='circle' color='#30D6C2' :customStyle='{width: "264rpx"}'
							open-type="getPhoneNumber" @getphonenumber='getPhoneNumber()'>绑定手机号</u-button>
						<u-button v-else disabled class="custom_btn" text='下一步' type='success' shape='circle'
							color='#30D6C2' :customStyle='{width: "264rpx"}'>绑定手机号</u-button>
					</view>
				</view>
			</view>
			<view class="second">
				<view class="tit">
					<text>姓名</text>
					<text>*</text>
				</view>
				<view class="input">
					<u--input :disabled="vuex_user.person_info.confirm_idcard=='1'" placeholder="请输入姓名" border="none"
						v-model="form.user_name" :customStyle="{Background: '#F3F4F6', padding: '0 15rpx'}"></u--input>
				</view>
			</view>
			<view class="second">
				<view class="tit">
					<text>身份证</text>
					<text>*</text>
				</view>
				<view class="input">
					<u--input :disabled="vuex_user.person_info.confirm_idcard=='1'" type="idcard" placeholder="请输入身份证号"
						border="none" v-model="form.id_card"
						:customStyle="{Background: '#F3F4F6', padding: '0 15rpx'}"></u--input>
				</view>
			</view>
			<view class="second">
				<view class="tit">
					<text>银行卡号</text>
					<text>*</text>
				</view>
				<view class="input">
					<u--input :disabled="vuex_user.person_info.source!='mp_mini'" placeholder="请输入银行卡号" type="number"
						border="none" v-model="form.bank_code"
						:customStyle="{Background: '#F3F4F6', padding: '0 15rpx'}"></u--input>
				</view>
			</view>
			<view class="second">
				<view class="tit">
					<text>开户行名称</text>
					<text>*</text>
				</view>
				<view class="input">
					<u--input :disabled="vuex_user.person_info.source!='mp_mini'" placeholder="请输入开户行名称" border="none"
						v-model="form.bank_openname"
						:customStyle="{Background: '#F3F4F6', padding: '0 15rpx'}"></u--input>
				</view>
			</view>
			<view style="margin-bottom: 28rpx;padding:0 24rpx;">
				<view class="upload-name">学生证</view>
				<u-upload :deletable="vuex_user.person_info.source=='mp_mini'" :fileList="fileList1"
					@afterRead="($event)=>afterRead($event,1)" @delete="($event)=>deletePic($event,1)" name="1"
					:maxCount="1"></u-upload>
			</view>
			<view style="margin-bottom: 28rpx;padding:0 24rpx;">
				<view class="upload-name">退休证</view>
				<u-upload :deletable="vuex_user.person_info.source=='mp_mini'" :fileList="fileList2"
					@afterRead="($event)=>afterRead($event,2)" @delete="($event)=>deletePic($event,2)" name="2"
					:maxCount="1"></u-upload>
			</view>
			<view style="margin-bottom: 28rpx;padding:0 24rpx;">
				<view class="upload-name">社保缴纳证明</view>
				<u-upload :deletable="vuex_user.person_info.source=='mp_mini'" :fileList="fileList3"
					@afterRead="($event)=>afterRead($event,3)" @delete="($event)=>deletePic($event,3)" name="3"
					:maxCount="1"></u-upload>
			</view>

			<view class="submit" v-if="vuex_user.person_info.source=='mp_mini'">
				<u-button type="success" text="保存" shape='circle' color='#30D6C2' @click="onSubmit()"></u-button>
			</view>
		</template>
		<template v-else>
			<view class="cell">
				<view class="s1">头像</view>
				<view class="s2">
					<button type="balanced" open-type="chooseAvatar" @chooseavatar="onChooseavatar">
						<image :src="avatarUrl"></image>
					</button>
				</view>
				<view class="s3">
					<u-icon name='arrow-down'></u-icon>
				</view>
			</view>

			<view class="cell">
				<view class="s1">昵称</view>
				<view class="s2">
					<input type="nickname" class="weui-input" :value="form.nickname" @blur="bindblur"
						placeholder="请输入昵称" @input="bindinput" />
				</view>
				<view class="s3">
					<u-icon name='arrow-down'></u-icon>
				</view>
			</view>

			<view class="cell" @click="gender_show = true">
				<view class="s1">性别</view>
				<view class="s2">
					<text class="weui-input">{{gender_list[0][form.sex] }}</text>
				</view>
				<view class="s3">
					<u-icon name='arrow-down'></u-icon>
				</view>
			</view>

			<view class="cell" style="display: flex;justify-content: space-between;">
				<view class="s1">电话</view>
				<view class="s2">
					<text class="weui-input">{{ form.phone }}</text>
					<view>
						<u-button class="custom_btn" text='下一步' type='success' shape='circle' color='#30D6C2'
							:customStyle='{width: "264rpx"}' open-type="getPhoneNumber"
							@getphonenumber='getPhoneNumber()'>绑定手机号</u-button>

					</view>
				</view>
			</view>
			<view class="second">
				<view class="tit">
					<text>姓名</text>
					<text>*</text>
				</view>
				<view class="input">
					<u--input placeholder="请输入姓名" border="none" v-model="form.user_name"
						:customStyle="{Background: '#F3F4F6', padding: '0 15rpx'}"></u--input>
				</view>
			</view>
			<view class="second">
				<view class="tit">
					<text>身份证</text>
					<text>*</text>
				</view>
				<view class="input">
					<u--input type="idcard" placeholder="请输入身份证号" border="none" v-model="form.id_card"
						:customStyle="{Background: '#F3F4F6', padding: '0 15rpx'}"></u--input>
				</view>
			</view>
			<view class="second">
				<view class="tit">
					<text>银行卡号</text>
					<text>*</text>
				</view>
				<view class="input">
					<u--input placeholder="请输入银行卡号" type="number" border="none" v-model="form.bank_code"
						:customStyle="{Background: '#F3F4F6', padding: '0 15rpx'}"></u--input>
				</view>
			</view>
			<view class="second">
				<view class="tit">
					<text>开户行名称</text>
					<text>*</text>
				</view>
				<view class="input">
					<u--input placeholder="请输入开户行名称" border="none" v-model="form.bank_openname"
						:customStyle="{Background: '#F3F4F6', padding: '0 15rpx'}"></u--input>
				</view>
			</view>
			<view style="margin-bottom: 28rpx;padding:0 24rpx;">
				<view class="upload-name">学生证</view>
				<u-upload :fileList="fileList1" @afterRead="($event)=>afterRead($event,1)"
					@delete="($event)=>deletePic($event,1)" name="1" :maxCount="1"></u-upload>
			</view>
			<view style="margin-bottom: 28rpx;padding:0 24rpx;">
				<view class="upload-name">退休证</view>
				<u-upload :fileList="fileList2" @afterRead="($event)=>afterRead($event,2)"
					@delete="($event)=>deletePic($event,2)" name="2" :maxCount="1"></u-upload>
			</view>
			<view style="margin-bottom: 28rpx;padding:0 24rpx;">
				<view class="upload-name">社保缴纳证明</view>
				<u-upload :fileList="fileList3" @afterRead="($event)=>afterRead($event,3)"
					@delete="($event)=>deletePic($event,3)" name="3" :maxCount="1"></u-upload>
			</view>

			<view class="submit">
				<u-button type="success" text="保存" shape='circle' color='#30D6C2' @click="onSubmit()"></u-button>
			</view>
		</template>

		<u-picker :show="gender_show" :columns="gender_list" @confirm="genderConfirm" @close='onClose'
			@cancel="onClose"></u-picker>

		<u-datetime-picker ref="datetimePicker" :show="birthday_show" v-model="birthday" mode="date" :min-date='minDate'
			:formatter="formatter" @confirm="birthdayConfirm" @close='onClose' @cancel="onClose"></u-datetime-picker>
	</view>
</template>

<script>
	import conf from '@/common/config.js';
	export default {
		data() {
			return {
				info: {},
				avatarUrl: '',
				res: {},
				user_local_phone: '',
				gender_show: false,
				gender_list: [
					['未知', '男', '女']
				],
				fileList1: [],
				fileList2: [],
				fileList3: [],
				form: {
					"phone": "", //手机号
					"sex": "", //性别 1=男 2=女
					"avatar": "", //头像
					"nickname": "", //昵称
					"user_name": "", //姓名
					"id_card": "", //身份证号
					"bank_code": "", //银行卡号
					"bank_openname": "", //开户行名称
					"stu_image": "", //学生证
					"retired_image": "", //退休证
					"insurance_image": "" //社保缴纳证明
				},
				birthday_show: false,
				birthday: Number(new Date()),
				minDate: new Date(1950, 1, 1).getTime(),
				echoInfo: false
			}
		},
		onLoad() {
			if (this.vuex_token) {
				let that = this
				that.$API.getUserInfo().then(res => {
					console.log(res);
					this.echoInfo = !!(Object.keys(res.data.person_info).length)
					console.log(this.echoInfo);
					that.avatarUrl = res.data.base_info.avatar
					if (this.echoInfo) {
						that.form = res.data.person_info
						that.user_local_phone = res.data.base_info.mobile
						if (res.data.person_info.stu_image) {
							this.fileList1 = [{
								url: conf.url_config + res.data.person_info.stu_image
							}]
						}
						if (res.data.person_info.retired_image) {
							this.fileList2 = [{
								url: conf.url_config + res.data.person_info.retired_image
							}]
						}
						if (res.data.person_info.insurance_image) {
							this.fileList3 = [{
								url: conf.url_config + res.data.person_info.insurance_image
							}]
						}


					}
					that.form.avatar = res.data.base_info.avatar
					that.form.nickname = res.data.base_info.nickname

				})
			} else {
				uni.showModal({
					title: '警告',
					content: '请先登录，才能进行下面操作！',
					showCancel: false,
					success: function(res) {
						uni.navigateBack()
					}
				})
			}
		},
		onReady() {
			// 微信小程序需要用此写法
			this.$refs.datetimePicker.setFormatter(this.formatter)
		},
		methods: {

			bindblur(e) {
				// 获取微信昵称
				console.log('nickName', e)
				this.nickName = e.detail.value;
				this.form.nickname = e.detail.value;
			},
			bindinput(e) {
				console.log('nickName', e)
				this.nickName = e.detail.value;
				this.form.nickname = e.detail.value;
			},
			onChooseavatar(e) {
				this.avatarUrl = e.detail.avatarUrl;
				let url = conf.url_config + '/api/common/upload';
				uni.uploadFile({
					url: url,
					filePath: e.detail.avatarUrl,
					name: 'file',
					formData: {},
					header: {
						Token: uni.getStorageSync('token')
					},
					success: (uploadFileRes) => {
						let data = JSON.parse(uploadFileRes.data);
						this.avatarUrl = data.data.fullurl
						this.form.avatar = data.data.url;
					}
				});
			},
			getPhoneNumber(e) {
				console.log(e);
				this.$API.getPhoneNumber({
					encryptedData: e.detail.encryptedData,
					iv: e.detail.iv,
				}).then(res => {
					// this.user_local_phone = res.data.phone
					this.form.phone = res.data.phone
				})
			},
			onSubmit() {
				if (!this.form.avatar) return uni.$u.toast('请上传头像')
				if (!this.form.nickname) return uni.$u.toast('请输入昵称')
				if (!this.form.sex) return uni.$u.toast('请选择性别')
				if (!this.form.phone) return uni.$u.toast('请绑定手机号')
				if (!this.form.phone) return uni.$u.toast('请绑定手机号')
				if (!this.form.user_name) return uni.$u.toast('请输入姓名')
				if (!uni.$u.test.idCard(this.form.id_card)) return uni.$u.toast('请填写正确的身份证号')
				if (!this.form.bank_code) return uni.$u.toast('请输入银行卡号')
				if (!this.form.bank_openname) return uni.$u.toast('请输入开户行名称')
				this.setProfile()
			},
			genderConfirm(e) {
				this.form.sex = e.indexs[0]
				// this.res.gender_text = e.value[0]
				this.gender_show = false;
			},
			setProfile(ava = 1) {
				let that = this
				// let params = {
				// 	nickname: this.res.nickname,
				// 	gender: this.res.gender,
				// 	birthday: this.res.birthday,
				// };
				// if (that.res.mobile) {
				// 	params.mobile = that.res.mobile
				// }
				// if (ava == 2) {
				// 	params.avatar = this.res.my_logo
				// }
				this.$API.profile({
					...this.form,
					stu_image: this.fileList1.length && this.fileList1[0].url.url,
					retired_image: this.fileList2.length && this.fileList2[0].url.url,
					insurance_image: this.fileList3.length && this.fileList3[0].url.url,
				}).then(res => {
					// that.$u.vuex('vuex_user', res.data.userinfo);
					uni.showModal({
						title: '温馨提示',
						content: '保存成功',
						showCancel: false,
						success: (res) => {
							uni.navigateBack();
						}
					})

				}).catch(err => {
					console.log('err', err)
				})
			},
			formatter(type, value) {
				if (type === 'year') {
					return `${value}年`
				}
				if (type === 'month') {
					return `${value}月`
				}
				if (type === 'day') {
					return `${value}日`
				}
				return value
			},
			birthdayConfirm(e) {
				let timestamp = e.value;
				let dateObj = new Date(timestamp);
				let year = dateObj.getFullYear();
				let month = dateObj.getMonth() + 1;
				if (month < 10) {
					month = '0' + month
				}
				let day = dateObj.getDate();
				if (day < 10) {
					day = '0' + day
				}
				this.res.birthday = `${year}-${month}-${day}`
				this.birthday_show = false
			},
			onClose() {
				this.gender_show = false
				this.birthday_show = false
			},
			bingPhone() {
				console.log('绑定手机号事件');
			},
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event, type) {
				console.log(type);
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: conf.url_config + '/api/common/upload',
						filePath: url,
						header: {
							Token: uni.getStorageSync('token')
						},
						name: 'file',
						formData: {},
						success: (res) => {
							let data = JSON.parse(res.data)
							console.log(data.data)
							setTimeout(() => {
								resolve(data.data)
							}, 1000)
						}
					});
				})
			},
		}
	}
</script>

<style>
	page {
		background-color: #FFFFFF;
	}
</style>
<style lang="scss" scoped>
	.info {
		width: 704rpx;
		margin: 0 auto;

		.second {
			box-sizing: border-box;
		}

		.cell {
			width: 100%;
			display: flex;
			flex-direction: row;
			align-items: center;
			padding: 38rpx 0;
			border-bottom: 2rpx solid #F3F4F6;
			box-sizing: border-box;

			.s1 {
				padding: 0 48rpx 0 24rpx;
				font-size: 28rpx;
				line-height: 50rpx;
				color: #909399;
				text-align: center;
				flex-wrap: nowrap;
				width: 50px;
				text-align: left;
			}

			.s2 {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;

				button {
					width: 100%;
					height: 122rpx;
					padding: 0;
					margin: 0;
					border-radius: 0;
					background: none;
					display: flex;
					justify-content: flex-start;

					image {
						width: 118rpx;
						height: 118rpx;
						border-radius: 100%;
						border: 2rpx solid rgba(0, 0, 0, .08);
					}

					&::after {
						border-color: rgba(0, 0, 0, 0);
					}
				}

				/deep/ .u-button {
					width: 212rpx;
					height: 58rpx;
					background: #30D6C2;
					border-radius: 8rpx;
					font-size: 28rpx;
					font-weight: 400;
					color: #F3F4F6;
				}

				.weui-input {
					font-size: 28rpx;
					font-weight: 400;
					color: #303133;
					line-height: 50rpx;
					width: 100%;
				}
			}

			.s3 {
				width: 48rpx;
				height: 48rpx;
			}
		}
	}

	.submit {
		// position: fixed;
		margin: 74rpx auto;
		width: 600rpx;
		height: 88rpx;
		bottom: 76rpx;
		left: 76rpx;
	}

	.tit {
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 34rpx 48rpx 0 24rpx;

		text {
			height: 50rpx;
			font-size: 28rpx;
			font-weight: 400;
			color: #606266;
			line-height: 50rpx;

			&:nth-child(2) {
				color: #E62020;
				margin-left: 20rpx;
			}
		}
	}

	.input {
		margin: 24rpx 10rpx 10rpx;

	}

	/deep/ .u-input {
		padding: 0 14rpx !important;
		height: 90rpx;
		background: #F3F4F6;
		border-radius: 8rpx;
	}

	.upload-name {
		font-weight: 400;
		font-size: 28rpx;
		color: #606266;
		line-height: 50rpx;
		margin-bottom: 22rpx;
	}
</style>